<template>
    <div>
        <div class="login-container">
          <div style="margin: 100px auto;background: white;width:350px;border-radius: 10px;overflow: hidden;">

            <el-tabs v-model="activeName" type="card">

              <el-tab-pane label="账号密码登录" name="first">

                <div style="width: 350px;" class="login-box">
                  <!-- ：model是校验的数据从哪来  ：rules是检验规则  名字必须一样-->
                  <el-form :model="loginForm" :rules="loginRules" :ref="formRef">
                  <el-form-item prop="username">
                  <el-input prefix-icon="User" v-model="loginForm.username" placeholder="请输入账号"/>
                  </el-form-item>
                  <el-form-item prop="userPwd">
                  <el-input show-password prefix-icon="Lock" v-model="loginForm.userPwd" placeholder="请输入密码"/>
                  </el-form-item>

        
                  <el-form-item>
                      <el-button type="primary" style="width:100% " @click="loginNP">登录</el-button>
                  </el-form-item>
                  </el-form>

                  <div style="margin-top: 20px; text-align: left;" @click="forgetPwd">
                      修改密码
                  </div>

                  <div style="margin-top: 30px; text-align: right;">                      
                    <router-link to="/register"> 去注册> </router-link>
                  </div>
                </div>

              </el-tab-pane>

              <el-tab-pane label="邮箱登录" name="second">
                <div style="width: 350px;" class="login-box">
                  <!-- ：model是校验的数据从哪来  ：rules是检验规则  名字必须一样-->
                  <el-form :model="emailForm" >
                  <el-form-item prop="userEmail">
                  <el-input prefix-icon="Message" v-model="emailForm.userEmail" placeholder="请输入邮箱"/>
                  </el-form-item>
                  <el-form-item prop="userCode">
                  <el-input style="width: 180px;"  prefix-icon="Lock" v-model="emailForm.code" placeholder="请输入验证码"/>
                  <el-button type="primary" @click="sendEmailCode">获取验证码</el-button>
                  </el-form-item>

              
                  <el-form-item>
                      <el-button type="primary" style="width:100% " @click="loginEmail">登录</el-button>
                  </el-form-item>
                  </el-form>
                  
                  <div style="margin-top: 30px; text-align: left;" @click="forgetPwd">
                      修改密码
                  </div>

                  <div style="margin-top: 30px; text-align: right;">                      
                    <router-link to="/register"> 去注册> </router-link>
                  </div>
                </div>
              </el-tab-pane>

            

            </el-tabs>

            
          </div>
        </div>
    </div>


    <div>
      <el-dialog width="35%" v-model="emailForm.formVisible" title="修改密码">
        <el-form :model="emailForm" label-width="100px" label-position="right">
          <el-form-item label="用户邮箱" >
            <el-input v-model="emailForm.userEmail" autocomplete="off" />
          </el-form-item>
          <el-form-item label="验证码">
                  <el-input style="width: 180px;"  prefix-icon="Lock" v-model="emailForm.code" placeholder="请输入验证码"/>
                  <el-button type="primary" @click="sendEmailCode">获取验证码</el-button>
                  </el-form-item>
          <el-form-item label="新密码" >
            <el-input v-model="emailForm.newUserPwd" autocomplete="off" />
          </el-form-item>
        
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="emailForm.formVisible = false">取消</el-button>
            <el-button type="primary" @click="save">提交</el-button>
          </span>
      </template>
      </el-dialog>
    </div>


</template>
<script setup lang="ts">

import { reactive ,ref} from "vue";
import { ElMessage } from "element-plus";
import type { FormInstance } from 'element-plus';
import { useUserInfoStore } from '../stores/userInfo';
//import { useRouter } from "vue-router";
import request from "../utils/request";

// const router=useRouter()
import router from '../router';
const userInfoStore=useUserInfoStore()


const forgetPwd=()=>{
  emailForm.value.formVisible=true
}

const save=()=>{
  if(emailForm.value.newUserPwd.length<5){
    ElMessage.error("密码不能少于5位")
    return
  }
  request.get(`user/forgetPwd?userEmail=${emailForm.value.userEmail}&code=${emailForm.value.code}&newUserPwd=${emailForm.value.newUserPwd}`).then(res=>{
    if(res.code==200){
      ElMessage.success("修改成功")
      emailForm.value.formVisible=false
      emailForm.value.code=""
    }

  })
}

//登录账号参数

const activeName='first'
const loginForm = ref({
      username: "",
      userPwd: "",
})

const emailForm=ref({
  formVisible:false,
  newUserPwd:'',
  userEmail:"",
  code:"",
  type: 0
})


const sendEmailCode=()=>{
  if(!emailForm.value.userEmail){
    ElMessage.error("请输入邮箱账号")
    return
  }
  if(emailForm.value.formVisible==false){
    emailForm.value.type=1
  }else{
    emailForm.value.type=0
  }
  
  request.get(`user/getCode?userEmail=${emailForm.value.userEmail}&type=${emailForm.value.type}`).then(res=>{
    if(res.code==200){
      ElMessage.success("发送成功")
      emailForm.value.code=""
    }

  })
  
}


const validateUsername = (rule: any, value: any, callback: any) => {
  if (value.length < 3) {
    callback(new Error('用户名长度不能小于3位'))
  } else {
    callback()
  }
}
// 校验规则
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value.length < 5) {
    callback(new Error('密码长度不能小于5位'))
  } else {
    callback()
  }
}
// 校验规则
const loginRules = {
  username: [{ required: true, validator: validateUsername }],
  userPwd: [{ required: true, trigger: 'blur', validator: validatePassword }]
}

const formRef = ref<FormInstance>()
const loginNP=async ()=>{//登录函数
    // console.log('点击登录');
  await formRef.value?.validate()
  
  try {
    await userInfoStore.loginNP(loginForm.value)
    ElMessage.success("登录成功")
    router.push({name:"homepage"})
   
  } finally {
    
  }
}


const loginEmail=async ()=>{//邮箱登录函数

  try {
    await userInfoStore.loginEmail(emailForm.value)
    ElMessage.success("登录成功")
    router.push({name:"homepage"})
   
  } finally {
    
  }
}

</script>
<style scoped>
    .login-container{
        min-height: 100vh; 
        overflow: hidden;
        display: flex; 
        align-items: center; 
        justify-content: center;
        background-image:url("https://ssyx-suzus.oss-cn-hangzhou.aliyuncs.com/2024/03/26/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-01-29%20202054.png") ;
        background-size: cover;
    }
    .login-box{
        background-color: rgba(255,255,255,0.8);
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        padding: 30px;
        border-radius:5px ;
        
    }
</style>